<template>
	<view class="home">
		<view class="input_item">
			<view class="text">
				设备地址：
			</view>
			<view class="input">
				<u--input placeholder="设备地址" type="digit" border="none" v-model="dataObj.address"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				设备编码：
			</view>
			<view class="input">
				<u--input placeholder="请输入设备编码" border="none" v-model="dataObj.code"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				经度：
			</view>
			<view class="input">
				<u--input placeholder="请输入经度" type="digit" border="none" v-model="dataObj.lon"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				纬度：
			</view>
			<view class="input">
				<u--input placeholder="请输入纬度" type="digit" border="none" v-model="dataObj.lat"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				密码：
			</view>
			<view class="input">
				<u--input placeholder="请输入密码" type="digit" border="none" v-model="dataObj.password"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				数据类型：
			</view>
			<view class="input">
				<uni-data-select
				      v-model="dataObj.types"
				      :localdata="types"
				      @change="typesChange"
				    ></uni-data-select>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				雨量分辨力：
			</view>
			<view class="input">
				<u--input placeholder="请输入雨量分辨力" type="digit" border="none" v-model="dataObj.rainfall"></u--input>
			</view>
		</view>
		<view class="input_item">
			<view class="text">
				中心站地址：
			</view>
			<view class="input">
				<u--input placeholder="请输入中心站地址" type="digit" border="none" v-model="dataObj.center"></u--input>
			</view>
		</view>
		<!-- <button @click="duqu">读取参数</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {
					address: '',
					code: '',
					lon: '',
					lat: '',
					password: '',
					types: '',
					rainfall: '',
					center: ''
				},
				types: [{
						value: 1,
						text: "JSON协议"
					},
					{
						value: 6,
						text: "651协议"
					}
				],
				value: '',
				deviceId: '',
				serviceId: '',
				characteristicId: '',
				fff: '',
				vuexlist: {},
			}
		},
		onShow() {
			uni.showToast({
				title: '信息获取中...',
				icon: 'loading',
				mask: true,
				duration: 2000
			});
			this.deviceId = this.vuex_deviceId
			this.getBLEDeviceServices()
		},
		onLoad(option) {

		},
		methods: {
			// 数据类型
			typesChange(e){
				console.log('e',e);
			},
			duqu() {
				let msg = ['0x0c', '0x03', '0xf0', '0x00', '0x00', '0x0c', '0x77', '0xD2']
				// let msg = ['0x00','0x03','0xff','0x02','0x00','0x01','0x14','0x0f']
				this.conbuffer(msg)
			},
			//监听消息变化
			listenValueChange() {
				setTimeout(() => {
					uni.onBLECharacteristicValueChange(res => {
						console.log('RES', res)
						let resHex = this.ab2hex(res.value)
						console.log('监听初始化数据', resHex);
						// console.log('监听转换字符串', this.hexToString(resHex)); let straa = liaa.toString(16).split('')    slice
					})
				}, 300)
			},
			// 16进制转字符串
			hexToString(hex) {
				let str = '';
				for (let i = 0; i < hex.length; i += 2) {
					let charCode = parseInt(hex.substr(i, 2), 16);
					str += String.fromCharCode(charCode);
				}
				return str;
			},
			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			},
			// 输入蓝牙数据
			conbuffer(data) {
				console.log('data', data);
				let msg = data
				// 向蓝牙设备发送一个0x00的16进制数据
				const buffer = new ArrayBuffer(msg.length)
				const dataView = new DataView(buffer)
				// dataView.setUint8(0, 0)
				for (var i = 0; i < msg.length; i++) {
					// dataView.setUint8(i, msg.charAt(i).charCodeAt())
					dataView.setUint8(i, msg[i]);
				}
				this.sendMsgToKey(buffer)
			},
			/* 向设备发送消息(分包发送，单包20字节，递归发送)
			 */
			sendMsgToKey(buffer) {
				console.log('buffer', buffer);
				var that = this //vue中的this
				const packageSize = 20 //分包大小
				if (buffer.byteLength <= 20) { //如果小于20直接发送，不再继续调用
					uni.writeBLECharacteristicValue({
						// 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
						deviceId: that.deviceId,
						// 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
						serviceId: that.serviceId,
						// 这里的 characteristicId 需要在上面的 getBLEDeviceCharacteristics 接口中获取
						characteristicId: that.fff, //第二步写入的特征值
						// 这里的value是ArrayBuffer类型
						value: buffer,
						writeType: 'write',
						success: (res) => {
							//此时设备已接收到你写入的数据
							console.log('写入111');
							// setTimeout(() => {
							// 	console.log('循环');
							// 	if (this.fanti) {
							// 		this.modifyup()
							// 	}
							// }, 500)

						},
						fail: (err) => {
							if (err.errCode == 10006) {
								uni.showToast({
									title: '当前连接已断开',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
							if (err.errCode == 10004) {
								uni.showToast({
									title: '未找到设备',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
							if (err.errCode == 10005) {
								uni.showToast({
									title: '未找到特征值',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
							console.log('传输失败', err)
						},
						complete: function() {}
					})
				} else { //如果大于20发送完成后继续递归调用
					var newData = buffer.slice(20)
					var writeBuffer = buffer.slice(0, 20)
					uni.writeBLECharacteristicValue({
						// 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
						deviceId: that.deviceId,
						// 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
						serviceId: that.serviceId,
						// 这里的 characteristicId 需要在上面的 getBLEDeviceCharacteristics 接口中获取
						characteristicId: that.fff, //第二步写入的特征值
						// 这里的value是ArrayBuffer类型
						value: writeBuffer,
						writeType: 'write',
						success: function(res) {
							console.log('写入222');
							//写入后继续递归调用发送剩下的数据
							that.sendMsgToKey(newData)
						},
						fail: (err) => {
							if (err.errCode == 10006) {
								uni.showToast({
									title: '当前连接已断开',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
							if (err.errCode == 10004) {
								uni.showToast({
									title: '未找到设备',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
							if (err.errCode == 10005) {
								uni.showToast({
									title: '未找到特征值',
									icon: 'success',
									mask: true,
									duration: 2000
								});
							}
						},
						complete: function() {}
					})
				}
			},
			//获取蓝牙的所有服务
			getBLEDeviceServices() {
				setTimeout(() => {
					uni.getBLEDeviceServices({
						// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
						deviceId: this.vuex_deviceId,
						success: (res) => {
							//E95D93AF-251D-470A-A062-FA1922DFA9A8
							//6E400001-B5A3-F393-E0A9-E50E24DCCA9E
							res.services.forEach((item) => {

								if (item.uuid.indexOf("0000FFF0") != -1) {
									this.serviceId = item.uuid;

									//获取特征
									this.getBLEDeviceCharacteristics()
								}
								if (item.uuid.indexOf("0000FFE0") != -1) {
									this.serviceId = item.uuid;

									//获取特征
									this.getBLEDeviceCharacteristics()
								}
							})
						}
					})
				}, 1500)
			},
			//获取蓝牙特征
			getBLEDeviceCharacteristics() {
				setTimeout(() => {
					uni.getBLEDeviceCharacteristics({
						// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
						deviceId: this.deviceId,
						// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
						serviceId: this.serviceId,
						success: (res) => {

							this.characteristics = res.characteristics
							res.characteristics.forEach((item) => {

								if (item.uuid.indexOf("FFF2") != -1) {
									this.fff = item.uuid

								}
								if (item.uuid.indexOf("FFE1") != -1) {
									this.fff = item.uuid

								}
								if (item.uuid.indexOf("0000FFE1") != -1) {

									this.characteristicId = item.uuid
									//利用传参的形势传给下面的notify，这里的uuid如果都需要用到，就不用做判断了，建议使用setTimeout进行间隔性的调用此方法
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
								if (item.uuid.indexOf("0000FFF1") != -1) {

									this.characteristicId = item.uuid


									//利用传参的形势传给下面的notify，这里的uuid如果都需要用到，就不用做判断了，建议使用setTimeout进行间隔性的调用此方法
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
							})
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}, 1000)
			},
			// 启用 notify 功能
			notifyBLECharacteristicValueChange(characteristicId) {
				uni.notifyBLECharacteristicValueChange({
					state: true, // 启用 notify 功能
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: this.deviceId,

					// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					serviceId: this.serviceId,
					// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
					characteristicId: this.characteristicId,
					success: (res) => {
						// vuex
						uni.$u.vuex('vuex_devicename', this.vuexlist.name)
						uni.hideLoading()
						this.listenValueChange()
						// uni.showToast({
						// 	title: '服务已开启',
						// 	icon: 'success',
						// 	mask: true,
						// 	duration: 1000
						// });
						uni.hideToast();
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '获取服务失败',
							icon: 'fail',
							mask: true,
							duration: 1000
						});

					}
				})

			},
		}
	}
</script>
<style scoped lang="scss">
	.home {
		margin: 10rpx 30rpx;
		padding: 15rpx 30rpx;
		border-radius: 20rpx;
		background-color: #0f192f;

		.input_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 15rpx 0;
			padding: 15rpx;
			border-radius: 10rpx;
			border: 3rpx solid #fff;
			background-color: #26345d;

			.text {
				color: #ffffff;
				text-align: justify;
				text-align-last: justify;
				padding: 15rpx;
				border-radius: 10rpx;
				width: 240rpx;
			}

			.input {
				width: 300rpx;
				padding: 15rpx;
				border-radius: 10rpx;
				background-color: #ebf3ff;
				// box-shadow: 0rpx 0rpx 15rpx rgba(29, 255, 191, 0.6);
			}
		}

	}
</style>
<style>
	page {
		background-color: #eceff5;
	}
</style>